<template>
  <div class="home-container">
    <!-- 头部导航栏 -->
    <div>
      <van-nav-bar fixed>
        <template #right>
          <!-- 坑:postcss只能翻译style里css样式代码，
        标签内行内样式它无法转换px转rem,所以需要自
        己手动计算:基准值/物理值（量出来的，即18/37.5=0.48rem）
         -->
          <van-icon name="search" size="0.48rem" @click="toSearch" />
        </template>
        <template #title> 极客园-首页 </template>
      </van-nav-bar>
    </div>
    <!-- 滚动导航条 -->
    <div>
      <van-tabs
        v-model="usersChannelsID"
        sticky
        offset-top="1.226667rem"
        animated
        @change="changeTabFn"
      >
        <!-- name属性可以把name属性值关联到 usersChannelsID 上-->
        <van-tab
          v-for="item in usersChannelsList"
          :title="item.name"
          :name="item.id"
          :key="item.id"
        >
          <ArticleList :ChannelsID="usersChannelsID"></ArticleList>
        </van-tab>
      </van-tabs>
      <van-icon name="plus" size="0.37333334rem" class="moreChannels" @click="showPopup" />
      <van-popup v-model="show" get-container="body" class="popupStyle">
        <ChannelEdit
          :usersList="usersChannelsList"
          :allList="allChannelsList"
          ref="editRef"
          @addChannelEV="addUserChannel"
          @delChannelEV="deleteUserChannel"
          @showEditEV="showEdit"
          @changeChannelsID="changeChannels"
        ></ChannelEdit>
      </van-popup>
    </div>
  </div>
</template>

<script>
import { getUsersChannelsAPI, getAllChannelsAPI, setChannelsAPI } from '@/api/index.js'
import ArticleList from '@/views/Home/components/ArticleList.vue'
import ChannelEdit from './ChannelEdit.vue'
import { mapMutations } from 'vuex'
export default {
  data() {
    return {
      usersChannelsID: 0,
      usersChannelsList: [],
      allChannelsList: [],
      show: false, // 用户选择的频道数组
      scrollTopObj: {}
    }
  },
  methods: {
    // vuex映射使用
    ...mapMutations(['newActive']),
    // 获取--用户频道
    async getUsersChannels() {
      const {
        data: { data }
      } = await getUsersChannelsAPI()
      console.log(`用户选择频道列表${data}`)
      this.usersChannelsList = data.channels
    },
    // 获取--所有列表
    async getAllChannels() {
      const {
        data: { data }
      } = await getAllChannelsAPI()
      console.log(`所有频道列表${data}`)
      this.allChannelsList = data.channels
    },
    // 显示频道管理页面
    showPopup() {
      this.show = true
    },
    // 添加用户频道
    addUserChannel(obj) {
      this.usersChannelsList.push(obj)
      // 将推荐过滤出去（接口里不要传递推荐选项）
      const newArray = this.usersChannelsList.filter((item) => item.id !== 0)
      setChannelsAPI(newArray)
    },
    // 删除用户频道
    deleteUserChannel(index) {
      this.usersChannelsList.splice(index, 1)
      // 将推荐过滤出去（接口里不要传递推荐选项）
      const newArray = this.usersChannelsList.filter((item) => item.id !== 0)
      setChannelsAPI(newArray)
    },
    // 显示编辑界面
    showEdit() {
      this.show = false
      // ref获取组件对象
      // 我要让内部的编辑状态回归false
      this.$refs.editRef.isEdit = false
    },
    // 切换频道
    changeChannels(item) {
      this.usersChannelsID = item.id
    },
    // 点击跳转到搜索页面
    toSearch() {
      this.$router.push('/search')
    },
    // 重新赋值active
    changeActive() {
      this.newActive(0)
    },
    changeTabFn() {
      this.$nextTick(() => {
        document.documentElement.scrollTop = this.scrollTopObj[this.usersChannelsID]
      })
    }
  },
  created() {
    this.getUsersChannels()
    this.getAllChannels()
    // console.log(this.$route)
  },
  activated() {
    // 重新赋值active
    this.changeActive()
    // 保存滚动条位置
    window.addEventListener('scroll', () => {
      this.$route.meta.scrollTop = document.documentElement.scrollTop
      this.scrollTopObj[this.usersChannelsID] = document.documentElement.scrollTop
      // console.log(this.scrollTopObj)
    })
    document.documentElement.scrollTop = this.$route.meta.scrollTop
  },
  components: {
    ArticleList,
    ChannelEdit
  }
}
</script>

<style lang="less" scoped>
.home-container {
  margin-top: 46px;
  padding-bottom: 50px;
}
// 设置 tabs 容器的样式
/deep/ .van-tabs__wrap {
  padding-right: 30px;
  background-color: #fff;
}

// 设置小图标的样式
.moreChannels {
  position: fixed;
  top: 62px;
  right: 9px;
  z-index: 999;
}

// 弹出层样式
/* 如果想给100%，要先给html和body设置100%
vw和vh是css3新出的单位，参考浏览器窗口的百分比 */
.popupStyle {
  width: 100vw;
  height: 100vh;
}
</style>
